<template>
  <div class="home">
  <!-- 首页导航栏 -->
  <div class="TopBar" ref="TopBar" :style="{background:bfPage.bg,zIndex:bfPage.zIndex}">
    <div class="center">
     <div class="topBarLeft" >
       <img v-show="!bfPage.isShow2" src="../../public/homeImg/logo2.png" alt="" >
        <span v-show="bfPage.isShow2" @click="down2()" class="iconfont iconDown">&#xe6cc;</span>
        <ul>
          <li class="yuan  jz"><span class="iconfont " style="color: #B3B3B3;">&#xe65c;</span></li>
          <li class="yuan jz"><span class="iconfont iconstyle" >&#xe65e;</span></li>
          <li style="height:100%"><div class="inputBox"><span class="iconfont">&#xe63c;</span>
          <input placeholder="搜索" type="text" @focus="inputSearchFocus()"  @blur='inputSearchBlue()' ref="">

          </div></li>
          <li class="yuan2 jz"><span class="iconfont">&#xe622;</span></li>
        </ul>
     </div>
     <div class="topBarRight" >
 
        <ul >
         
          <li class="loginCenter">
         
               <div class='flexView' v-show="!txSrc" @click="isShowlogin()">
              <span class="iconfont tx "  style="color: #B3B3B3;">&#xe62b;</span>
          
            <div class='loginSpan'>未登录</div>
           
            </div>
            <div class='flexView' v-show="txSrc"  @click="showPerson()">
              <img   style="height: 38px;
                width: 38px;
                border-radius: 50%;" :src="txSrc" alt="">
          
            <div class='loginSpan'>{{username}}</div>
            </div>
             <span class="iconfont sj" style="color: #B3B3B3;">&#xe644;</span>
            <div class='loginSpan'>开通vip</div>
          </li>
          <!-- 皮肤 -->
          <li> <span class="iconfont iconStyleRIght" >&#xe600;</span></li>
          <!-- 设置 -->
          <li> <span @click="exit()" class="iconfont iconStyleRIght">&#xe62a;</span></li>
          <!-- 邮件 -->
          <li> <span class="iconfont iconStyleRIght">&#xe917;</span></li>
          <!-- 竖杆 -->
          <li> <span class="iconfont iconStyleRIght">&#xe63a;</span></li>
          <!-- 缩小 -->
          <li> <span class="iconfont iconStyleRIght">&#xe6f3;</span></li>
          <!-- 折叠 -->
          <li> <span class="iconfont ">&#xe60a;</span></li>
          <!-- 放大 -->
          <li> <span class="iconfont ">&#xea6b;</span></li>
         <!-- 关闭 -->
          <li> <span class="iconfont ">&#xe61a;</span></li>
        </ul>
      
      </div>
    </div>
  </div>
  <!-- 播放页面 覆盖首页 -->

  <div class="pageBox" 
    :style="{
    height:bfPage.clientHeight+'px',
    top:bfPage.top+'px',
    transition:topTime}">
    <bfPage :data='[showBf,bfPage.isShow]' ref="pageChild"></bfPage>
  </div>


  <div class="main">
  <!-- 中间内容左侧导航栏 -->
  <div class="LeftBar">
    <ul>
    <!-- <li>视频</li>
    <li>朋友</li>
    <li>直播</li> -->
    <!-- <li>
      <router-link  to="/LeftFrient">朋友</router-link>
    </li> -->
      <li  v-for="(items,index) in routerDate" 
       :key="index" 
      @click="upData(items.name)"
      :class="{ activeFind:activeFind == items.name}" 
      v-if="items.mate.h1 == 'find' && items.mate.hidden !== true ">
          <router-link  :to="items.path">{{items.mate.title}}</router-link>
      </li>
    </ul>
    <span style="display: block;">我的音乐</span>
    <ul>
      <!-- <li><span class="iconfont iconStyleLeft marginRight">&#xe610;</span>本地音乐</li>
      <li><span class="iconfont iconStyleLeft marginRight">&#xe855;</span>下载管理</li>
      <li><span class="iconfont iconStyleLeft marginRight">&#xe62f;</span>最近播放</li> -->
     <li  class="iconfont iconStyleLeft marginRight" 
     v-for="(items,index) in routerDate" 
     v-if="items.mate.h1 == 'myMusic' && items.mate.hidden !== true " :key="index">
          <router-link :to="items.path">{{items.mate.title}}</router-link>
      </li>
    </ul>
    <span style="display: block;">创建的歌单<span class="iconfont" style="color: #B3B3B3;">&#xe644;</span>
    <span class="iconfont floatRight jia">&#xe727;</span>
    </span>
    <ul>
      <li   v-for="(items,index) in routerDate" 
       v-if="items.mate.h1 == 'like' && items.mate.hidden !== true " :key="index"
      >
        <span class="iconfont iconStyleLeft  marginRight">&#xe86f;</span>
        <router-link :to="items.path">{{items.mate.title}}</router-link></li>
    </ul>
  </div>
  <!-- 中间主要内容部分 -->
  <div class="mainBox"  :class="{nomarginFriend:activeFind=='leftFrient'}">
    
    <div class="mainBoxConcent" :class="{nomarginFriend:activeFind=='leftFrient'}">
      
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
  </div>


    <!-- 底部 -->
      <div class='bottom' ref="bottom">
        <!-- //底部弹窗 反面-->
        <ul class="left2-others" ref="showPanel" v-show="isShowOther">
          <li  @click.stop=visit()>
            <span class="iconfont">&#xe657;</span>
            <span>邀请好友一起听</span>
          </li>
          <li @click="showFx()" ref="refFx">
            <span class="iconfont">&#xe706;</span>
            <span>分享</span>   
          </li>
        </ul>
        <div class="left2-visit" v-show="visiFriend" ref="showPanel2">
         <p>邀请好友一起听</p>
         <span class="titleMin">互关好友</span>
          <ul class="list">
            <li>
              <div>
                <img src="../../public/homeImg/cat.jpg" alt="">
                <span class="name">起名特别麻烦</span>
                <span>CVIP</span>
                  <span class="iconfont sex">&#xe8b4;</span>
              </div>
              <button class="visit-button">邀请</button>       
            </li>
            <li>
              <div>
                <img src="../../public/homeImg/cat.jpg" alt="">
                <span class="name">起名特别麻烦</span>
                <span>CVIP</span>
                  <span class="iconfont sex">&#xe8b4;</span>
              </div>
              <button class="visit-button">邀请</button>       
            </li>
            <li>
              <div>
                <img src="../../public/homeImg/cat.jpg" alt="">
                <span class="name">起名特别麻烦</span>
                <span>CVIP</span>
                  <span class="iconfont sex">&#xe8b4;</span>
              </div>
              <button class="visit-button">邀请</button>       
            </li>
            <li>
              <div>
                <img src="../../public/homeImg/cat.jpg" alt="">
                <span class="name">起名特别麻烦</span>
                <span>CVIP</span>
                  <span class="iconfont sex">&#xe8b4;</span>
              </div>
              <button class="visit-button">邀请</button>       
            </li>
            <li>
              <div>
                <img src="../../public/homeImg/cat.jpg" alt="">
                <span class="name">起名特别麻烦</span>
                <span>CVIP</span>
                  <span class="iconfont sex">&#xe8b4;</span>
              </div>
              <button class="visit-button">邀请</button>       
            </li>
            <li>
              <div>
                <img src="../../public/homeImg/cat.jpg" alt="">
                <span class="name">起名特别麻烦</span>
                <span>CVIP</span>
                  <span class="iconfont sex">&#xe8b4;</span>
              </div>
              <button class="visit-button">邀请</button>       
            </li>
            <li>
              <div>
                <img src="../../public/homeImg/cat.jpg" alt="">
                <span class="name">起名特别麻烦</span>
                <span>CVIP</span>
                  <span class="iconfont sex">&#xe8b4;</span>
              </div>
              <button class="visit-button">邀请</button>       
            </li>
          </ul>
          <div class="fx">
            <ul>
              <li>
                <div><span class="iconfont ">&#xf010b;</span></div>
                <span>复制链接</span>
              </li>
              <li>
                <div><span class="iconfont bgWx">&#xe6e6;</span></div>
                <span>微信好友</span>
              </li>
              <li>
                <div><span class="iconfont bgQq">&#xe882;</span></div>
                <span>QQ好友</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="leftBox">
          <div class="left" 
           :style="{top:topValue1+'px',transition:topTime}">
            <div class="singImg" :style="{background:'url('+song.imgUrl+')'}" @click="down1()">
              <span class="iconfont jt1">&#xe65d;</span>
            </div>
            <div class="singer-xq">
                <span>{{song.name}}</span>
                <span class="iconfont marg" @click="showSc=!showSc" v-show="!showSc">&#xeca2;</span>
                <span class="iconfont bgsc" @click="showSc=!showSc"  v-show="showSc">&#xeca1;</span>
              <span class="singerName">{{song.singer}}</span>
            </div>
        </div>
        <div class="left2"  :style="{top:topValue2+'px',transition:topTime}">
            <span @click="down2()" class="iconfont jt" >&#xe62d;</span>
            <div>
              <span class="iconfont" @click="showSc=!showSc" v-show="!showSc">&#xeca2;</span>
              <span class="iconfont bgsc" @click="showSc=!showSc"  v-show="showSc">&#xeca1;</span>
            </div>
            <div><span class="iconfont" @click="sc">&#xe632;</span></div>
            <div><span class="iconfont">&#xe855;</span></div>
            <div @click.stop="others()"><span class="iconfont">&#xe679;</span>

            </div>
        </div>
        </div>
        <div class="content">
          <div class="other">
            <!-- 播放顺序 -->
            <!-- autoplay 
            controls -->
            <!-- :src="$store.getters.updataCurrentPlay.songUrl"  -->
            <audio 
            :src="$store.getters.updataCurrentPlay"
            preload="auto" 
            controls
            @canplay="getDuration"
            @timeupdate="updateTime"
            autoplay
            ref="audio"
            style="width:0px;height:0px"
            ></audio>
            <Message :data='[Message,MessageShow]'></Message>
            <div class="order" @click="playOrderFn()">
                    <!-- //1:顺序播放 2：随机播放 3：单曲循环 -->
              <span class="iconfont" v-show="playOrder==1">&#xea82;</span>
              <span class="iconfont" v-show="playOrder==2">&#xea75;</span>
              <span class="iconfont xh" v-show="playOrder==3">&#xea76;</span>
            </div>
            <span class="iconfont" @click="last()">&#xe63d;</span>
            <div class="bfBox" @click="bf()" >
              <span  class="iconfont" v-show="showBf">&#xe87a;</span>
              <span  class="iconfont"  v-show="!showBf">&#xe87c;</span>
            </div>
            <span class="iconfont" @click="next()">&#xe63e;</span>
            <span style="font-size:17px"> 词</span>
          </div>
          <div class="bf">
              <span class="bfTime">{{song.bfTime}}</span>
            <div class="progress">
              <div class="playNumber" :style="{width:progressW+'%'}"></div>
            </div>
            <span class="allTime">{{song.counTime}}</span>
          </div>
        </div>
        <div class="right">
          <span class="grad">标准</span>
          <span class="iconfont">&#xe605;</span>
          <span class="iconfont">&#xea0d;</span>
          <div class="progress-volume">
              <div class="volumeNumber" :style="{width:progressW+'%'}"></div>
          </div>
          <span @click.stop="showDislogList()" class="iconfont">&#xea82;</span>
          <div></div>
        </div>
      </div>
      <DialogSC :data='[ishowDislog]' 
                @dislogScSoon = 'dislogScSoon' @fund='fund'>
                <span name='title' slot="title">收藏</span>
      </DialogSC>
      <DialogMr :data='[isShowFund,type]' 
                 @fund='fund'>
                <span name='title' slot="title">创建歌单</span>
      </DialogMr>
      <DialogFx :fxList='fxList' 
                 @FxSoon='FxSoon'>
                <span name='title' slot="title">分享到</span>
      </DialogFx>
      <DialogList v-if="dislogList.isShowdislogList" :data='dislogList' @dislogListSoon = 'dislogListSoon'></DialogList>
      <DialogSerach v-if='isInputDislog'></DialogSerach>
      <SlotLogin v-show="isSlotLogin"></SlotLogin>
  </div>

    
  </div>
</template>

<script>

import HomeJx from '@/components/HomeJx.vue'
import HomeGd from '@/components/HomeGd.vue'
import HomeDt from '@/components/HomeDt.vue'
import HomePh from '@/components/HomePh.vue'
import HomeGs from '@/components/HomeGs.vue'
import HomeNew from '@/components/HomeNew.vue'
//收藏歌单弹窗
import DialogSC from '@/components/slotDislogSc.vue'
//新建歌单弹窗
import DialogMr from '@/components/slotDislogMr.vue'

import DialogFx from '@/components/slotDislogFx.vue'
import bfPage from '@/components/bfPage.vue'
import useAddRouter from '@/utils/loadingRouter'
import Message from '@/components/slotMessage.vue'
import DialogList from '@/components/silotList.vue'
import DialogSerach from '@/components/slotDislogSearch.vue'
import SlotLogin from '@/components/slotLogin.vue'
import api from '../utils/api'
import Services from '../utils/Service'

export default {
  name: 'HomeView',
  data() {
    return {
      isShowOtherDislog:false,
      showPag:'HomeJx',
      dh:2,
      dhWidth:36,
      miao:'left 0.2s linear',
      routerDate:Array,
      activeFind:'leftFind',
      showSc:false,
      //是否播放
      showBf:false,
      progressW:Number,
      // 底部导航栏左边top值
      topValue1:String||Number,
      topValue2:-96,
      topTime:'top 0.5s',
      //是否收藏
      ishowDislog:false,
      //展示新建歌单
      isShowFund:false,
       //展示新建歌单
      type:'fund',
      //展示其他（left2下的other）
      isShowOther:false,
      visiFriend:false,
       fxList:[
                {
                    isShowFx:false,
                    type:'homeFx',
                    refFx:'',
                
                }
            ],
          
      bfPage:{
        topTime:'top 5s',
        // 是否展示
        isShow:false,
        clientHeight:Number,
        top:Number,
        // 控制顶部导航栏在播放页面显示后两秒后改变新的样式 true/false
        isShow2:false,
        // 当播放页面出现，顶部导航栏样式变化
        bg:'',
        zIndex:2,
        


      },
      //1:顺序播放 2：随机播放 3：单曲循环
        playOrder:1,
      //消息弹窗
      Message:'转发成功',
      MessageShow:false,
      dislogList:{
        TopBarH:Number,
        bottomH:Number,
              //展示播放列表
        isShowdislogList:false,
        soonRef:''

      },
      // inputSearch:false
      // 是否展示
      isInputDislog:false,
      // 展示登陆窗口
      isSlotLogin:false,
      loginDislog:{

      },
      username:'未登录',
      txSrc:'',
      // 播放音乐部分
      song:{
        currentPlay:'',
        allTime:'',
        currentTime:'',
        bfTime:'0.00',
        counTime:'0.00',
        name:'',
        title:'',
        singer:'',
        imgUrl:''
      }
      
    }
  },
  watch: {
    bfPage: {
       deep:true, 
      handler: function (val) {
          if(val.isShow){
           //当需要禁止弹出框底部内容滑动时调用： 
          this.stopScroll() 

        }else{
          //当需要页面恢复滑动功能时调用： 
          this.canScroll()
        }

      },
      immediate: true,
    },
     	'$store.state.currentPaly'(val, oldVal){
         console.log('播放歌曲变化了')
        // console.log(val)
       this.updataSong(val) 
     	 			}	


  },
  components: {
    HomeJx,HomeGd,HomeDt,HomePh,HomeGs,HomeNew,DialogSC,DialogMr,DialogFx,
    bfPage,Message,DialogList,DialogSerach,SlotLogin
  },
  created() {
   let logindata =  this.$store.getters.updataLoginData
   console.log( this.$store.getters.updataStore)
   console.log(logindata)
  this.username = logindata.data.profile.nickname
  this.txSrc = logindata.data.profile.avatarUrl
// console.log(this.$store.getters.updataStore)
     useAddRouter()
     this.routerDate = this.$store.getters.updateNav
  
      this.$nextTick(function () {
          this.fxList[0].refFx = this.$refs.refFx
      })

    document.addEventListener('click',(e)=>{
       // 左下角反面弹窗1
       if(this.$refs.showPanel){
           let isSelf = this.$refs.showPanel.contains(e.target)
           if(!isSelf){
               this.isShowOther = false
           }
       }
       if(this.$refs.showPanel2 &&  this.visiFriend){
           let isSelf = this.$refs.showPanel2.contains(e.target)
           if(!isSelf){
               this.visiFriend = false
           }
       }
        //  播放列表弹窗DislogBfList
       if(this.dislogList.soonRef&&this.dislogList.isShowdislogList){
           let isSelf = this.dislogList.soonRef.contains(e.target)
           if(!isSelf){
              this.dislogList.isShowdislogList = !this.dislogList.isShowdislogList
           }
       }

   })

  },
  mounted() { 
this.updataSong(this.$store.getters.updataCurrentPlaylist)
        this.$bus.$on('isSlotLogin',(data)=>{
      this.isSlotLogin = data
    })
    // this.$nextTick(function () {
    //            this.transformation(this.song.allTime,this.song.currentTime)
    //   })
    this.bfPage.clientHeight = `${document.documentElement.clientHeight}`  
    this.bfPage.top = `${document.documentElement.clientHeight}`//document.body.clientWidth;
    window.onresize = () => {
      return (() => {
         this.bfPage.isShow = true;
        this.bfPage.clientHeight = `${document.documentElement.clientHeight}`
      })()
    }
  },
  methods: {
    // <video @timeupdate="updateTime" @canplay="getDuration" ref="video" :src="AvUrl" controls="controls" autoplay="autoplay" height="720px"></video>
updataSong(val){
let songList = this.$store.getters.updataCurrentPlaylist
      songList.forEach((item,index)=>{
        // console.log('执行')
        // //  console.log(item.name)
        // //  console.log(item.songUrl)
        //   console.log(songList)

        if (item.songUrl == val) {
         this.song.name = item.name
         this.song.title = item.alia[0]
         this.song.singer=item.singer
         this.song.imgUrl=item.picUrl
        }
      });

},

      getDuration() {
               this.song.allTime = this.$refs.audio.duration; //获取视频的总时长
                this.showBf=true
             this.song.counTime = Math.floor(this.song.allTime /60) + ':'+(this.song.allTime %60/100).toFixed(2).slice(-2) 
                // console.log(s+'=========获取视频的总时长')
      },
 async updateTime() {
                this.song.currentTime= await this.$refs.audio.currentTime;//获取当前播放时间
                    //  console.log( this.song.currentTime+'=======获取当前播放时间')
              await this.transformation(this.song.allTime,this.song.currentTime)
               this.song.bfTime = Math.floor(this.song.currentTime /60) + ':'+(this.song.currentTime %60/100).toFixed(2).slice(-2) 
                this.song.currentTime==this.song.allTime?this.showBf=false:this.showBf
     },
     last(){
      let songList = this.$store.getters.updataCurrentPlaylist
      let currentPlay = this.$store.getters.updataCurrentPlay
        for (var i = 0; i < songList.length; i++) {
          let curentKey = i - 1  //curentKey上一首坐标
    if (curentKey < songList.length &&curentKey >=0&&  songList[i].songUrl == currentPlay ) {
        // 存放上一首
        //  console.log(i,curentKey)
        // console.log(currentPlay)
        // console.log(songList[i+1].name)
       this.$store.dispatch('setCurrentPlaylist',songList[curentKey].songUrl)
       break;
    }else{
      this.$store.dispatch('setCurrentPlaylist',songList[songList.length-1].songUrl)
    }

}
    },
    next(){
      let songList = this.$store.getters.updataCurrentPlaylist
      let currentPlay = this.$store.getters.updataCurrentPlay
        for (var i = 0; i < songList.length; i++) {
          let curentKey = i + 1  //curentKey下一首坐标
    if (songList[i].songUrl == currentPlay && curentKey < songList.length) {
        // 存放下一首
        //  console.log(i,curentKey)
        // console.log(currentPlay)
        // console.log(songList[i+1].name)
       this.$store.dispatch('setCurrentPlaylist',songList[curentKey].songUrl)
       break;
    }else{
      this.$store.dispatch('setCurrentPlaylist',songList[0].songUrl)
    }

}
    },
    // 调用进度样式函数
    
    async exit(){
      let res = await Services(api.logout);
      console.log(res)
      if(res.status == 200&&res.data.code==200){
        this.$store.commit('CHANGESTORE',false)
                // this.$store.dispatch('CHANGESTORE',true)
                //  console.log(this.$store.state.is)
                this.$store.commit('setLoginData',null)
      }else{
        console.log(res)
      }
    },
    showPerson(){
      this.$router.push({path: '/person'});
    },
    isShowlogin(){
      console.log()
      this.isSlotLogin = true;
      // this.$http.get('/api/playlist/catlist').then((res)=>{
      //   console.log(res)
      // })
    },
    inputSearchFocus(){
     this.isInputDislog = !this.isInputDislog 
    
    },
    inputSearchBlue(){
       this.isInputDislog = !this.isInputDislog 
    },
    showDislogList(){
      this.dislogList.isShowdislogList = !this.dislogList.isShowdislogList
      this.dislogList.TopBarH =  this.$refs.TopBar.offsetHeight
      this.dislogList.bottomH = this.$refs.bottom.offsetHeight
      this.isShowOther = false
      this.fxList[0].isShowFx = false 
    },
    dislogListSoon(ref){
      this.dislogList.soonRef = ref;
    },
    playOrderFn(){
      this.playOrder = this.playOrder+1;
      if(this.playOrder == 4){this.playOrder=1}
      
      this.MessageShow = true
      if (this.playOrder == 1) {
         this.Message='顺序播放'
      } else {
        if (this.playOrder == 2) {
          this.Message='随机播放'
        } else {
          this.Message='单曲循环'
        }
      }

    },
    bf(){
      
      this.showBf=!this.showBf
      //显示播放页面 和 播放歌曲
      if(this.showBf&&this.bfPage.isShow){
        this.$refs.pageChild.correctCoverRotate()

         
      }
      //显示播放页面 和 暂停播放 的时候
      if(!this.showBf&&this.bfPage.isShow){
 
        this.$refs.pageChild.preservationCoverRotate();
      }
      this.showBf?this.$refs.audio.play():this.$refs.audio.pause();
   
    },
    down1(){
        this.topValue1 = this.$refs.bottom.offsetHeight;
        this.topValue2 = 0;
        

      // 显示播放页面
        this.bfPage.isShow = true;
        this.bfPage.top = 0
        setTimeout(()=>{
                this.bfPage.isShow2 = true;

               this.bfPage.bg = 'linear-gradient(#CCCCCA, #D1D1CF)'
               this.bfPage.zIndex = 999
            },350);
    },
    down2(){
      this.topValue1 = 0;
      this.topValue2 = this.$refs.bottom.offsetHeight-(this.$refs.bottom.offsetHeight*2);

      // 清空度数
        this.$refs.pageChild.exit()
      // 关闭显示播放页面
      this.bfPage.isShow = false;
        this.bfPage.top = this.bfPage.clientHeight
           setTimeout(()=>{
                this.bfPage.isShow2 = false;
                // 关闭播放页面后显示顶部导航栏恢复样式
                 this.bfPage.bg = ''
               this.bfPage.zIndex = 1
            },100);
    },
    sc(){
            this.ishowDislog = true

    },
    //接收转发子组件传过来的内容
    dislogScSoon(value){
            this.ishowDislog = value
    },
    //接收子组件新建
        fund(value){
            this.isShowFund = value
            // console.log(this.isShowFund)
        },
    others(){
      this.dislogList.isShowdislogList = false
      if(this.visiFriend == false){
        this.isShowOther =  !this.isShowOther
      }
      if(this.visiFriend == true){
        this.visiFriend =  !this.visiFriend
      }
      if( this.fxList[0].isShowFx){
          
          this.fxList[0].isShowFx = false
          // console.log(this.fxList[0].isShowFx)
      }
      
      
    },
    visit(){
      this.visiFriend = !this.visiFriend;
      this.isShowOther = false
    },
  
        //接收分享子组件
    FxSoon(value){
        this.fxList[0].isShowFx = value[0]
         
    },
      showFx(){
this.fxList[0].isShowFx = true 
            this.isOther=!this.isOther
            
            this.isShowOther =  !this.isShowOther
        },
        //音乐进度样式
        // time 播放总时长
        // bfNumber 当前播放时长
   async transformation(time,bfNumber){
      this.progressW = (bfNumber/time)*100;
    },
    upData(a){
    this.activeFind = a;
    // console.log(a)
    },
    animation(target,e){
      
     this.$nextTick(function () {// 调用$nextTick函数

    //e.target.innerHTML获取当前元素值
    //this.$refs.title.childNodes[0].offsetLeft// 获取dom子元素到父元素的距离
    for (let index = 0; index < this.$refs.title.childNodes.length; index++) {
      const element = this.$refs.title.childNodes[index].innerHTML;
        this.$refs.title.childNodes[index].style.fontWeight = 200;
      if(element == e.target.innerHTML  ){
                  this.showPag = target;     
                  var str =element;
                  // console.log(this.dh)
                  // console.log(this.$refs.title.childNodes[index].offsetLeft)
          var len = 0;
          //遍历字符串，以字符的Unicode编码识别中文
         this.dhWidth = 36;
          for(var key in str)
          {
          //中文字符在Unicode编码中占据 0x4E00~0x9FBF 字段
          if( (str.charCodeAt(key) >= 0x4E00) && (str.charCodeAt(key) <= 0x9FBF) )
          {
          len += 2;
          }
          else
          {
          len ++;
          }
          }
          this.dh =this.$refs.title.childNodes[index].offsetLeft+2
          // console.log(this.dhWidth)
          this.dhWidth = this.dhWidth*(len/4)
          // console.log(this.$refs.title.childNodes[index])
          this.$refs.title.childNodes[index].style.fontWeight = 700;
         
          
          
          
          
          
      }
    }
    
	})
    }
   
  }
}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon4/iconfont.ttf?t=1659187482449') format('truetype');
}
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/font-icon5/iconfont.ttf?t=1660989543054') format('truetype');
}
    div,span,ul,li,img{
    font-size: 0;
    // 用户不可选中文本
      user-select: none;
}
.nomarginFriend{
  margin-top: 0 !important;
}
.swiper-wrapper{
  z-index: 0 !important;
}
.swiper-container{
  z-index: 0 !important;
}
.activeFind{
  font-weight: 800 !important;
  background: #F6F6F7 !important;
  font-size: .125rem /* 24/192 */ !important;
  
}
.TopBar{
  height: .390625rem /* 75/192 */;
  background-color: #F5F5F5;
  overflow: hidden;
  width: 100%;
  position: relative;
  position:sticky ;
  position: -webkit-sticky;
  top: 0;
  // position: fixed;
  // left: 0;
  // top: 0;
  z-index: 9999;

  .center{
      // z-index: 9999;
    overflow: hidden;
    width: 9.75rem /* 1872/192 */;
    height: .229167rem /* 44/192 */;
    // border: 1px solid red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -4.875rem; /* 936/192 */
    margin-top: -.114583rem; /* 22/192 */

    img{
    width: .833333rem /* 160/192 */;
    margin: auto 0;
    }
    .iconDown{
    width: 0.833333rem /* 160/192 */;
    margin: auto 0;
    color: #2B2A2A !important;
    font-weight: 500;
    font-size: 20px;
    margin-left: 20px;
    }
    .topBarLeft{
      width: 50%;
      display: flex;
      float: left;

      //  border: 1px solid black;
        ul{
         margin-left: .572917rem /* 110/192 */;
         display: flex;
         align-items: center;
         
         li{
           margin-left: .083333rem /* 16/192 */;
           .inputBox{
          height: 100%;
          // width: 1.041667rem /* 200/192 */;
          background: #EAEAEA;
          border-radius:.182292rem /* 35/192 */;
          display: flex;
          justify-content:center;
           align-items:center; 
          span{
            display: block;
            font-size: .114583rem /* 22/192 */;
            margin-left: .072917rem /* 14/192 */;
          
          }
          input{
            width: 80%;
            background: #EAEAEA;
            margin-left: 2px; 
            color: #222;
            outline: none;
          }
          input::-webkit-input-placeholder { /* WebKit browsers */  
            color: #B3B3B3; 
          }  
        }
         }
       }
    }
  
     
  }
 
  .topBarRight{
    height: 100%;
    float: right;


      ul{
         height: 100%;
        li{
          height: 100%;
        }
        display: flex;
         align-items: center;
         li:not(:first-child){
           display: flex;
           align-items: center;
           margin-left: .109375rem /* 21/192 */;
         }
      }
      .loginCenter{
        display: flex;
        align-items: center;
        width: 100%;
         font-size: 12px;
        .loginSpan{
           font-size: .078125rem /* 15/192 */;
           width: 120px;
           white-space: nowrap;
/* 强制性的在一行显示所有的文本，直到文本结束或者遭遇br标签对象才换行*/
overflow: hidden;
/* 溢出的文字隐藏起来*/
text-overflow: ellipsis;
/*溢出的文字使用圆点显示*/
        }
        .tx{
          font-size:38px;
        }

        .sj{
          font-size: 14px;
        }
        span,div{
          margin-left: .041667rem /* 8/192 */;
        }
      }
    
  }
   

  .yuan{
    background: #EBEBEB;
    border-radius:50% ;

    text-align: center;
    width: .192708rem /* 37/192 */;
    height: .177083rem /* 34/192 */;
  }
  .yuan2{
    background: #EBEBEB;
    border-radius:50% ;

    text-align: center;
    width: .213542rem /* 41/192 */;
    height: .213542rem /* 41/192 */;
  }
//垂直居中 弹性布局 在父级中设置
.jz{
 display:flex;
    justify-content:center;
    align-items:center; 
}   
}
    div,span,ul,li,img{
    font-size: 0;
}

.pageBox{
 /* IE 10+ */
-ms-overflow-style: none;
/* Firefox */
overflow: -moz-scrollbars-none;
overflow-x :hidden;

overflow-y :auto;

width: 100vw;
       
  background-image: linear-gradient(#CCCCCA, #FFFFFF);
position: fixed;
  transition: top 2s;
        z-index: 2;
  
       
        
}

.main{
  user-select: none;
  width: 100%;
  display: flex;
  overflow: hidden;
.LeftBar{
  position: fixed;

    top: .390625rem /* 75/192 */;
    left: 0px;
  // width: 1.302083rem /* 250/192 */;
  width: 250px;
      margin-right: 6px;
  border-right: 1px solid #E1E1E1 ;
  background-color: #FFFFFF;
  min-height: 4.979167rem /* 956/192 */;
  padding: .09375rem /* 18/192 */ .020833rem /* 4/192 */ 0 .078125rem /* 15/192 */;
 h1{
   background: #F6F6F7;
   padding: .0625rem /* 12/192 */;
 }
 >span{
    display: inline-block;
    // margin-top: .09375rem /* 18/192 */;
    color: #AEAEAE;
    font-size: 12px;
  }
  ul>li{
     padding: .0625rem /* 12/192 */;
    margin-top:.015625rem /* 3/192 */;
    font-size: .104167rem /* 20/192 */;
  }
  ul>li:hover{
    background: #F6F6F7;
  }
}
.mainBox{
  max-width: 82%;
min-width: 80%;
  // border: solid #666666 1px;
  margin: 25px 0 0 72px;
  position: relative;
left:1.302083rem /* 250/192 */ ;
  .mainBoxConcent{
    margin-top: 22px;
    // border: 1px solid palevioletred;
  }
}



// 底部
@media screen and  (min-width: 900px) and (max-width:1200px) {
  .bottom{
    height: 96px;
    background: pink;
  }
}
@media screen and  (min-width: 1201px) and (max-width:1940px)  {
  .bottom{
    height: 90px;

   
  }
}
.bottom{
box-sizing: border-box;
z-index: 999;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #FFFFFF;
border-top: #E1E1E1 solid 1px;
display: flex;

 .left2-others{
      visibility: visible;
          position: absolute;
    left: 12%;
    clear: both;
    bottom: 80px;
        width: 208px;
    border: 1px solid #d9d9d9;
    border-radius: 5px;
        z-index: 9999;
    background: #ffffff;
    box-shadow: #f6f6f6 0px 0px 3px 3px;
       li{
            padding: 12px 20px !important;
                display: flex;
              align-items: center;
         span{
            cursor: pointer;
            font-size: 22px;
        }
        span:last-child{
         font-size: 16px;
         margin-left: 10px;
        }
       }
       li:hover{
        background: #F5F5F6;
       }
      
    }
 .left2-visit{
   
      visibility: visible;
          position: absolute;
    left: 12%;
    clear: both;
    bottom: 80px;
    border-radius: 5px;
        z-index: 9999;
    background: #ffffff;
        z-index: 999;
    box-shadow: 0px 0px 7px rgb(0 0 0 / 9%);
    background: white;
   
    width: 380px;
    height: 500px;
    overflow: hidden;
    p{
      font-size: 18px;
      font-weight: 800;
      margin: 25px 20px 12px 20px;
       
    }
    .titleMin{
      display: block;
        font-size: 15px;
      color: #333333;
      margin: 0px 20px 10px 20px;
    }
      .list::-webkit-scrollbar {/*滚动条整体样式*/
        width: 8px;
        border-right: 1px solid #F3F3F3;
    }
      .list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #E1E1E1;
    
    height: 30px !important;
}   
    .list{
      height: 300px;
      overflow-y: scroll;
    li::after{
         content:".";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    li{
      margin: 13px 20px;
     
     div{
        float: left;
        display: flex;
        align-items: center;
        .name{
             margin-left: 10px !important;
        }
         img{
        width:52px;
        height: 52px;
        border-radius: 50%;
      }
      
        span{
          margin-left: 5px;
      font-size: 15px;
      color: #333333;
    }
      .sex{
            color: #E95893;
    background: #F8C6E2;
    display: inline-block;
    padding: 2px;
    border-radius: 50%;
    font-weight: 500;
    font-size: 17px;
      }
     }
     
      .visit-button{
        display: none;
        float: right;
          outline: none;
          font-size: 15px;
          background: #EC4141;
          border: none;
          padding: 6px 20px;
          color: white;
          border-radius: 17px;
          letter-spacing: 4px;
          margin-top: 5px;
      }
      .visit-button:hover{
        background: #D83B3B;
        cursor: pointer;
      }
    }

li:hover{
      .visit-button{
        display: inline-block !important;
      }
     }

    }
    }
.fx{
   margin-top: 20px;
    ul{
      display: flex;
    align-items: center;
    justify-content: center;
    li{
     width: 33.3%;
     padding: 0 auto;
     div{
          background: #F4F4F4;
    height: 52px;
    width: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
      span:first-child{
        color: #333333;
        font-size:28px;
       
      }
    .bgWx{
      color: #00CA09 !important;
    }
    .bgQq{
      color: #313131 !important;
    }
     }
      
    }
     span{
      cursor: pointer;
      font-size: 16px;
      color: #333333;
      display: block;
    text-align: center;
    }
    }
  }
 .leftBox{
     overflow: hidden;
  width: 25%;
  position: relative;
  // 底部
@media screen and  (min-width: 900px) and (max-width:1200px) {
  .left{
    height: 96px;

  }
}
@media screen and  (min-width: 1201px) and (max-width:1940px)  {
  .left{
    height: 90px;

   
  }
}
@media screen and  (min-width: 900px) and (max-width:1200px) {
  .left2{
    top: 96px;
  }
}
@media screen and  (min-width: 1201px) and (max-width:1940px)  {
  .left2{
    top: 90px;
    
   
  }
}
  .left{
    
    top: 0px;
    position: absolute;
    display: flex;
    align-items: center;
    // justify-content: center;
    height: 100%;
    .singImg{
      cursor: pointer;
      margin-left: 15px;
      height: 65px;
      width: 65px;
      // background-image: url('../../public/homeImg/cat.jpg');
          background-position: 10% 40%;
            /*这个是按从左往右，从上往下的百分比位置进行调整*/
            background-size: 50% 50%;
            /*按比例缩放*/
            /*background-size: 100px 100px;!*这个是按数值缩放*!*/
            background-repeat: no-repeat;
      background-size: cover;
      border-radius: 5px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
     .jt1{
       display: none !important;
       color: #F2F2F2 !important;
      font-size:26px;
      z-index: 99;
     }
    }
    //遮罩层
    .singImg:hover::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .2);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    
    }
     .singImg:hover{
      .jt1{
      display: block !important;
       color: #F2F2F2 !important;
      font-size:26px;
      font-weight: 500;
     }
     }
    .singer-xq{
      margin-left: 15px;
      .bgsc{
         cursor: pointer;
        color: #EC4141;
        margin-left: 5px;
         font-size:20px;

      }
      .marg{
         margin-left: 5px;
         font-size:22px;
      }
      span{
        color: #333333;
        font-size:20px;
      }
      .singerName{
      font-size: 16px;
      display: block;
    }
    }
    
  }
  .left2{
    position: absolute;
    display: flex;
    align-items: center;
    // justify-content: center;

    span{
        color: #333333;
        font-size:23px;
      }
    div:hover{
        background: #F4F4F4;
    }
    .jt{
       cursor: pointer;
      margin-left: 15px;
      height: 65px;
      width: 65px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
      .bgsc{
         cursor: pointer;
        color: #EC4141 !important;
    }
    div{
    border: 1px solid #E6E6E6;
    padding: 10px;
    border-radius: 50%;
     margin-left: 20px;
       display: flex;
    align-items: center;
    justify-content: center;
    }
    


 
  }
}

  .content{
    width: 50%;
    height: 100%;
    .other{
       display: flex;
    align-items: center;
    justify-content: center;
   margin-top: 10px;
  //  background: red;
   .order{

        width: 65px;
   }
      .xh{
      font-size: 26px !important;
     }
      span:hover{
      color: #FF4E4E !important;
     }
   .bfBox:hover{
    background: #E1E1E1;
   }
   .bfBox{
    background: #F4F4F4;
    padding: 15px;
    border-radius: 50%;
     margin-left: 40px;
       display: flex;
    align-items: center;
    justify-content: center;
     span{
      margin-left: 0px !important;
      font-size: 20px;
      color: #333333;
     }
  
    span:hover{

      color: #333333 !important;
     }
   }
    span{
      cursor: pointer;
      font-size: 24px;
      margin-left: 40px;
    }
    }
    .bf{
     display: flex;
    align-items: center;
    justify-content: center;
  span{
    font-size: 14px;
  }
  .bfTime{
    margin-right: 10px;
  }
  .allTime{
    margin-left: 10px;
  }
  .progress{
    height: 5px;
    width: 60%;
    background: #CDCDCD;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    .playNumber{
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: #FF4E4E;

    }
  }
  .progress:hover{
     height: 10px;
      border-radius: 5px;
  }
}
}

  .right{
     width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    .grad{
          // color: #EC5252 !important;
    display: inline-block;
    border: solid 1px #333333;
    padding: 0 2px;
    color: #333333;
    font-weight: 300;
    border-radius: 3px;
       font-size: 15px !important;
    }
    span{
      cursor: pointer;
      font-size: 28px;
      margin-left: 25px;
    }
  .progress-volume{
     height: 4px;
    width: 72px;
    background: #CDCDCD;
    position: relative;
    .volumeNumber{
       position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background: #FF4E4E;
    }
  }
  }
  }
}
 
.iconStyleRIght{
  font-size: .119792rem /* 23/192 */;
  color: #313131;
 
}
.iconStyleLeft{
  font-size: .098958rem /* 19/192 */;
  color: #313131;
}
.font23{
  font-size: .119792rem /* 23/192 */;
}
.font23Px{
   font-size:23px;
}
.font23(){
  font-size: .119792rem /* 23/192 */;
}
.font21px(){
  font-size:21px;
}
.marginRight{
  margin-right:.072917rem /* 14/192 */;
}
.floatRight{
  float: right;
}
.jia{
  color: #666666;
  margin-right: .104167rem /* 20/192 */;
  font-weight: inherit;
}

</style>